﻿@page "{name}/{handler?}"
@model AlbumsModel

@{
    ViewData["Title"] = Model.Album.Name;
    ViewData["Description"] = $"The photo album \"{Model.Album.Name}\" containing {Model.Album.Photos.Count} photos";
    ViewData["Image"] = Request.Scheme + "://" + Request.Host + Model.Album.CoverPhoto?.GetThumbnailLink((int)ImageType.Full, out int h);
}
@section Styles{
    <link href="~/lib/fancybox/dist/jquery.fancybox.min.css" rel="stylesheet" />
}
<div id="admin" if-authorized>
    <form method="post" enctype="multipart/form-data">
        <input type="file" id="files" aria-label="Upload photo" name="files" required multiple accept="image/*" />
        <input type="submit" asp-page-handler="upload" data-progress="Uploading..." id="btnfiles" value="上传照片" />
    </form>

    <form method="post" class="delete">
        <input type="submit" asp-page-handler="delete" id="deletealbum" aria-label="Delete album..." title="删除相册..." value="X" />
    </form>
</div>

<div id="title">
    <paging model="@Model.Album" />
    <h2>@Model.Album.Name</h2>
</div>

<div class="pic photolist">
    @{
        foreach (Photo photo in Model.Album.Photos)
        {
            <a href="@photo.DownloadLink" data-fancybox="images" data-caption="@photo.DisplayName">
                <img photo="@photo" Type="Thumbnail" />
            </a>
        }
    }
</div>


@section scripts {
    <script if-authorized src="/js/admin.js" async></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"
            asp-fallback-src="~/lib/fancybox/dist/jquery.fancybox.min.js"
            crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {

            $("[data-fancybox]").fancybox({
                // Options
                loop: true,
                // Enable keyboard navigation
                keyboard: true,
                // Should display navigation arrows at the screen edges
                arrows: true,

                // Should display infobar (counter and arrows at the top)
                infobar: false,

                // Should display toolbar (buttons at the top)
                toolbar: true,

                // What buttons should appear in the top right corner.
                // Buttons will be created using templates from `btnTpl` option
                // and they will be placed into toolbar (class="fancybox-toolbar"` element)
                buttons: [
                    'slideShow',
                    'fullScreen',
                    'thumbs',
                    'close'
                ],

                // Detect "idle" time in seconds
                idleTime: 4,

                // Should display buttons at top right corner of the content
                // If 'auto' - they will be created for content having type 'html', 'inline' or 'ajax'
                // Use template from `btnTpl.smallBtn` for customization
                smallBtn: 'auto',

                // Disable right-click and use simple image protection for images
                protect: false,
                // Internationalization
                // ============
                
                lang: 'cn',
                i18n: {
                    'en': {
                        CLOSE: 'Close',
                        NEXT: 'Next',
                        PREV: 'Previous',
                        ERROR: 'The requested content cannot be loaded. <br/> Please try again later.',
                        PLAY_START: 'Start slideshow',
                        PLAY_STOP: 'Pause slideshow',
                        FULL_SCREEN: 'Full screen',
                        THUMBS: 'Thumbnails'
                    },
                    'cn': {
                        CLOSE: '关闭',
                        NEXT: '下一个',
                        PREV: '上一个',
                        ERROR: '无法加载内容. <br/> 请稍后再试.',
                        PLAY_START: '开始幻灯片播放',
                        PLAY_STOP: '停止幻灯片播放',
                        FULL_SCREEN: '全屏',
                        THUMBS: '缩略图'
                    }

                }
            });

        });

    </script>
}

@section head {
    <link if-authorized rel="stylesheet" href="/css/admin.scss" />
    @if (Model.Album.Next != null)
    {
        <link rel="next" href="@Model.Album.Next.Link" />
        <link rel="prefetch" href="@Model.Album.Next.Link" />
    }

    @if (Model.Album.Previous != null)
    {
        <link rel="prev" href="@Model.Album.Previous.Link" />
    }
}